<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('新增充值卡')}" />
    <th:block th:insert="~{include :: datetimepicker-css}" />
    <style>
        .tips{
            color: #db0000;
            font-size: 12px;
            line-height:34px;
        }
    </style>
</head>
<body class="hold-transition"><div class="container-fluid mt-2 mb-2">
    <form class="form-horizontal m" id="form-recharge-add">
        <div class="form-group row" style="margin-top: 30px">
            <label class="col-sm-3 col-form-label is-required text-sm-right">充值卡名称</label>
            <div class="col-sm-6">
                <input name="name" class="form-control" type="text" placeholder="输入充值卡名称" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label is-required text-sm-right">充值卡额度</label>
            <div class="col-sm-3">
                <input name="money" class="form-control" type="number" placeholder="输入金额" required>
            </div>
        </div>
        <div class="form-group row">
            <label class=" col-sm-3 col-form-label font-noraml text-sm-right">有效期</label>
            <div class="col-sm-6 input-daterange input-group">
                <input type="text" autocomplete="off" name="beginTime" class="input-sm form-control" id="datetimepicker-startTime" placeholder="起始日期" required/>
                <span class="input-group-addon">至</span>
                <input type="text" autocomplete="off" name="endTime" class="input-sm form-control" id="datetimepicker-endTime" placeholder="到期日期" required/>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label is-required text-sm-right">充值卡数量</label>
            <div class="col-sm-3">
                <input name="num" id="cardNum" placeholder="输入数量" class="form-control" type="number" required>
            </div>
            <span class="tips">*必须是数字</span>
        </div>
    </form>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: datetimepicker-js}" />
<script type="text/javascript">
    $("#form-recharge-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            if(parseInt($("#cardNum").val()) <= 0){
                $.modal.msgError('生成数量必选大于"0"，并且是正整数')
                return false;
            }
            if (parseInt($("#cardNum").val()) > 2000) {
                $.modal.msgError("生成数量不能大于2000");
                return false;
            }
            var data = $("#form-recharge-add").serializeArray();
            $.operate.save("/card/recharge/add.json", data);
        }
    }

    $("#datetimepicker-startTime").datetimepicker({
        format:'Y-m-d',
        formatDate:'Y-m-d',
        formatTime:'H:i:00',
        timepicker: false,
        step:5 //设置分钟数间格
    }).on('changeDate', function(event) {
        event.preventDefault();
        event.stopPropagation();
        var startTime = event.date;
        $('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
    });

    $("#datetimepicker-endTime").datetimepicker({
        format:'Y-m-d',
        formatDate:'Y-m-d',
        formatTime:'H:i:00',
        timepicker: false
    }).on('changeDate', function(event) {
        event.preventDefault();
        event.stopPropagation();
        var endTime = event.date;
        $("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
    });


</script>
</body>
</html>